<template>
	<view class="live flex flex-dir-c psb">
		<!-- 直播导航 -->
		<view class="nav">
			<u-search placeholder="搜索" @change="searchChange" v-model="all.seaechValue" :show-action="false" style="margin-bottom: 20rpx;" @search="getLivesList"></u-search>
			<u-tabs class="tabs" active-color="rgb(252,186,13)" name="text" is-scroll v-model="swiperCurrent"
				:list="all.navList"></u-tabs>
		</view>

		<!-- 直播列表 -->
		<swiper :current="swiperCurrent" @change="listSwitch" class="swiper f1" :duration="300">
			<swiper-item class="swiper-item" v-for="index in all.navList.length" :key='index'>
				<scroll-view class="scroll" scroll-y style="height: 100%;">
					<template v-if="all.list.length">
						<view class="flex flex-wrap-w flex-jc-sb">
							<view class="list" v-for="item in all.list" :key="item.id" @click="lookLive(item)">
								<view class="list-title">
									<image :src="item.cover_img"></image>
									<view class="list-title-name flex flex-jc-sb">	
										<view>{{item.username}}</view>
										<view>0</view>
									</view>
								</view>
								<view class="list-bottom">
									<view>{{item.title}}</view>
									<view style="text-align: right;">
										<u-icon name="close" size="16"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</template>
					
					<template v-else>
						<view style="height: 100%;">
							<u-empty text="数据为空" mode="list"></u-empty>
						</view>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import common from '@/api/common.js'
	import lives from '@/api/lives.js'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	const store = useStore()
	let swiperCurrent = ref(0)
	let all = reactive({
		navList: [],
		screenHeight: 0,
		list: [],
		userinfo: uni.getStorageSync('userinfo'),
		seaechValue: ''
	})
	const searchChange = (e) => {
		if(!e) {
			getLivesList()
		}
	}
	//获取导航列表
	const getNavList = async () => {
		const res = await common.dictionary('live')
		all.navList = res.data.live
		getLivesList()
	}
	//获取直播列表
	const getLivesList = async () => {
		const res = await lives.getLivesList({
			like: all.seaechValue,
			type: all.navList[swiperCurrent.value].id
		})
		all.list = res.data
	}
	const listSwitch = (val : any) => {
		swiperCurrent.value = val.detail.current
	}
	const lookLive = (item) => {
		
		store.commit('chatUser', item)
		// #ifndef H5
		if(item.userid == all.userinfo.userid){
			uni.navigateTo({
				url: `/pages_home/create_live/index?palyerType=1&id=${item.id}`
			})
		}else {
			uni.navigateTo({
				url: `/pages_home/create_live/index?palyerType=2&id=${item.id}`
			})
		}
		// #endif
		// #ifdef H5
		if(item.userid == all.userinfo.userid){
			uni.navigateTo({
				url: `/pages_home/create_live/live?palyerType=1&id=${item.id}`
			})
		}else {
			uni.navigateTo({
				url: `/pages_home/create_live/live?palyerType=2&id=${item.id}`
			})
		}
		// #endif
		
	}
	onShow(() => {
		getNavList()
	})
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: rgb(247,247,250);
	}
	.live {
		height: 100%;
	
		.nav {
			padding: 20rpx;
			background-color: #fff;
			.tabs {
				text-align: center;
			}
		}

		.swiper {
			padding: 0 20rpx 20rpx 20rpx;
			.list{
				border-radius: 12rpx;
				margin-top: 20rpx;
				width: 49%;
				background-color: #fff;
				.list-title {
					width: 100%;
					height: 300rpx;
					position: relative;
					image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
					&-name{
						width: 100%;
						padding: 10rpx 20rpx;
						position: absolute;
						bottom: 0;
						left: 0;
						color: #fff;
						background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.5));
					}
				}
				.list-bottom{
					position: relative;
					font-size: 24rpx;
					padding: 20rpx;
				}
			}
			
		}
	}
</style>